<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../lib/animate.css"/>
		<style type="text/css">
			li{
				border: 1px dashed #999;
				margin: 5px;
				line-height: 35px;
				padding-left: 5px;
				font-size: 12px;
				width: 100%;
			}
			li:hover{
				background-color: pink;
				transition: all 1s ease;
			}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateY(80px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 0.6s ease;
				
			} 
			
			.v-move{
				transition: all 0.6s ease;
			}
			
			.v-leave-active{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<label>
					ID:
					<input type="text" v-model="id" />
				</label>
				<label>
					Name:
					<input type="text" v-model="name" />
				</label>
				<input type="button" value="添加" @click="add"/>
			</div>
			
				<!-- 在实现列表过度的时候，如果需要过度的元素是通过v-forx渲染出来的，不能使用transition 
				需要使用transitionGroup-->
				<!-- <transition-group enter-active-class="fadeInUp" leave-active-class="fadeInDown" :duration="{enter:400,leave:500}">
					<li v-for="item in list" :key="item.id" class="animated" @click="del(item.id)">
						{{item.id}} --- {{item.name}}
					</li>
				</transition-group> -->
				<!-- appear 给transition添加页面刚加载时入场时候的效果 -->
				<!-- 通过tag属性指定transition-group渲染成什么元素，如果不指定，默认渲染span标签 -->
				<transition-group appear tag="ul">
					<li v-for="item in list" :key="item.id"  @click="del(item.id)">
						{{item.id}} --- {{item.name}}
					</li>
				</transition-group>
				
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					
					list:[
						{ id:1,name:'赵高'},
						{ id:2,name:'秦桧'},
						{ id:3,name:'严嵩'},
						{ id:4,name:'魏忠贤'}
						
					]
				},
				methods:{
					add(){
						//判断id是否重复，同时是否为空
						var result =this.list.some(item=>{
							if(item.id == this.id || this.id == '' || this.name == '' ){
								alert('不得为空或者重复');
								return true;
							}
						})
						
						if(!result){
							this.list.push({id:this.id,name:this.name});
							this.id = this.name = '';
						}
						
					},
					del(id){
						var index = this.list.findIndex(item=>{
							if(item.id == id){
								return true;
							}
						})
						
						this.list.splice(index,1);
					}
					
				}
			})
		</script>
	</body>
</html>
